<template>
  <div class="dashboard-container">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <el-card class="box-card" style="height: 200px; padding-top: 25px" shadow="hover">
          <div style="float: left">
            <el-image style="width: 100px; height: 100px" :src="avatar" :preview-src-list="srcList" />
          </div>
          <div style="padding-left: 120px">
            <p style="font-weight: bold">{{ initTime() }}尊敬的 {{ name }} 用户</p>
            <p>愿您的每一天都充满创新与发现！</p>
          </div>
        </el-card>
        <el-card class="box-card" shadow="hover">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :timestamp="activity.timestamp"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
        <el-card class="box-card" shadow="hover">
          <div @click="$router.push('/lab')">
            <div class="left">
              <p class="count">{{ labCount }}</p>
              <p>实验室总数</p>
            </div>
            <div class="right">
              <i class="el-icon-office-building"></i>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
        <el-card class="box-card num" shadow="hover">
          <div @click="$router.push('/lab/lab-sub')">
            <div class="left">
              <p class="count">{{ labSubCount }}</p>
              <p>实验空闲数</p>
            </div>
            <div class="right">
              <i class="el-icon-office-building"></i>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
        <el-card class="box-card num" shadow="hover" v-if="roleId != 3">
          <div @click="$router.push('/device')">
            <div class="left">
              <p class="count">{{ deviceCount }}</p>
              <p>设备总数</p>
            </div>
            <div class="right">
              <i class="el-icon-monitor"></i>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
        <el-card class="box-card num" shadow="hover" v-if="roleId != 3">
          <div @click="$router.push('/device/repair')">
            <div class="left">
              <p class="count">{{ deviceRepairCount }}</p>
              <p>设备维修数</p>
            </div>
            <div class="right">
              <i class="el-icon-document-delete"></i>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
        <el-card class="box-card" shadow="hover">
          <div ref="lineChart" style="width: 100%; height: 380px"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <el-card class="box-card" shadow="hover" v-if="roleId != 3">
          <div ref="barChart" style="width: 100%; height: 350px"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <el-card class="box-card" shadow="hover" v-if="roleId != 3">
          <div ref="pieChart" style="width: 100%; height: 350px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['name', 'avatar'])
  },
  data() {
    return {
      roleId: '',

      labCount: 388,
      labSubCount: 268,
      deviceCount: 299,
      deviceRepairCount: 168,

      srcList: [
        'https://img0.baidu.com/it/u=2123036823,827931345&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
        'https://img0.baidu.com/it/u=3429084431,3824519370&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
      ],
      activities: [
        {
          content: '实验室统计页面完善',
          timestamp: '2024-09-03 20:46',
          color: '#0bbd87'
        },
        {
          content: '新增实验室预约功能',
          timestamp: '2024-08-03 20:46',
          size: 'large'
        },
        {
          content: '新增实验室设备报修功能',
          timestamp: '2024-07-03 20:46',
          size: 'large'
        },
        {
          content: '新增登录日志功能',
          timestamp: '2024-06-03 20:46',
          size: 'large'
        },
        {
          content: '新增操作日志功能',
          timestamp: '2024-05-03 20:46',
          size: 'large'
        },
        {
          content: '实验室管理系统发布了',
          timestamp: '2024-04-03 20:46'
        }
      ]
    }
  },
  created() {
    this.roleId = sessionStorage.getItem('roleId')
  },
  mounted() {
    this.initLineChart()
    this.initBarChart()
    this.initPieChart()
  },
  beforeDestroy() {
    if (this.lineChart) {
      this.lineChart.dispose()
      this.lineChart = null
    }
    if (this.barChart) {
      this.barChart.dispose()
      this.barChart = null
    }
    if (this.pieChart) {
      this.pieChart.dispose()
      this.pieChart = null
    }
  },
  methods: {
    initTime() {
      const hours = new Date().getHours()

      if (hours >= 0 && hours < 6) {
        return '凌晨好！'
      } else if (hours >= 6 && hours < 12) {
        return '上午好！'
      } else if (hours >= 12 && hours < 18) {
        return '下午好！'
      } else if (hours >= 18 && hours < 24) {
        return '晚上好！'
      }

      return '未知时间段！'
    },

    initLineChart() {
      this.lineChart = echarts.init(this.$refs.lineChart)
      const lineOptions = {
        title: {
          text: '实验室使用率-折线图'
        },
        tooltip: {},
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {},
        series: [
          {
            name: '使用量',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      }
      this.lineChart.setOption(lineOptions)
    },
    initBarChart() {
      this.barChart = echarts.init(this.$refs.barChart)
      const barOptions = {
        title: {
          text: '设备报修率-树状图'
        },
        tooltip: {},
        xAxis: {
          data: ['键盘', '鼠标', '试管', '显示屏', '放大镜', '燃烧瓶']
        },
        yAxis: {},
        series: [
          {
            name: '报修数',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      this.barChart.setOption(barOptions)
    },
    initPieChart() {
      this.pieChart = echarts.init(this.$refs.pieChart)
      const pieOptions = {
        title: {
          text: '设备报修率-饼状图'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '8%',
          left: 'center'
        },
        series: [
          {
            name: '报修率',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 5, name: '键盘' },
              { value: 20, name: '鼠标' },
              { value: 36, name: '试管' },
              { value: 10, name: '显示屏' },
              { value: 10, name: '放大镜' },
              { value: 20, name: '燃烧瓶' }
            ]
          }
        ]
      }
      this.pieChart.setOption(pieOptions)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 20px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.box-card {
  margin-top: 10px;
  cursor: pointer;

  .right {
    line-height: 90px;
    font-size: 36px; /* 图标大小 */
    color: #409eff; /* 图标颜色 */
    float: right;
  }

  .left {
    text-align: center;
    float: left;

    .count {
      font-size: 18px; /* 字体大小 */
      font-weight: bold; /* 字体加粗 */
      color: #333; /* 字体颜色 */
    }
  }
}
</style>
